<template>
	<view class="container">
		<view class="u-flex u-row-around u-font-32 f-item u-m-t-30" style="color: #0D1D36;">
			<text space="emsp" @click="yqr" :class="[currentTab == 0 ? 'qb' : '']" >互认企业</text>
			<text space="emsp" @click="wqr" :class="[currentTab == 1 ? 'qb' : '']">团队</text>
		</view>
		<view v-if="currentTab == 0"  >
			<view class="teamName">
				<view v-for="(item,index) in 12" :key="index" class="tdbk" :style="{ backgroundImage: 'url(' + bjxm + ')' }">
					<text class="sgz">企业头像</text>
				</view>
			</view>
			<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
			<view class="sx">
				<view class="photo" >
					
				</view>
				<view class="u-font-30 u-m-t-30" >
					企业编号+番号
				</view>
				<view class="fh u-m-t-20">
					<text class="sz">0123123123123123</text>
				</view>
			</view>
			<view class="u-m-t-45">
				<view class="u-flex u-row-between u-font-30 u-m-l-20 u-m-r-20">
					<text>企业名称</text>
					<text style="color: #9EA2B0;">无极伟特</text>
				</view>
				<view class="u-flex u-row-between u-m-t-40 u-font-30 u-m-l-20 u-m-r-20">
					<text>企业地址</text>
					<text style="color: #9EA2B0;">武汉</text>
				</view>
				<view class="u-flex u-row-between u-m-t-40 u-font-30 u-m-l-20 u-m-r-20">
					<text>企业性质</text>
					<text style="color: #9EA2B0;">施工企业</text>
				</view>
				<view class="u-flex u-row-between u-m-t-40 u-font-30 u-m-l-20 u-m-r-20">
					<text>企业规模</text>
					<text style="color: #9EA2B0;">200人</text>
				</view>
				<view class="u-flex u-row-between u-m-t-40 u-font-30 u-m-l-20 u-m-r-20">
					<text>企业资质</text>
					<text style="color: #9EA2B0;">规划/建筑/景观甲级</text>
				</view>
			</view>
			<u-button class="button" @click="submit">查看详情</u-button>
			<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" ></u-gap>
			<view class="teamName u-m-b-35">
				<view v-for="(item,index) in 18" :key="index" class="tdbk" :style="{ backgroundImage: 'url(' + bjxm + ')' }">
					<text class="sgz">单个企业</text>
				</view>
			</view>
		</view>
		<view v-if="currentTab == 1"  >
			<view class="teamName">
				<view v-for="(item,index) in 12" :key="index" class="tdbk" :style="{ backgroundImage: 'url(' + bjxm + ')' }">
					<text class="sgz">团队头像</text>
				</view>
			</view>
			<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
			<view class="sx">
				<view class="photo" >
					
				</view>
				<view class="u-font-30 u-m-t-30" >
					团队编号+番号
				</view>
				<view class="fh u-m-t-20">
					<text class="sz">26887961598821567</text>
				</view>
			</view>
			<view class="u-m-t-45">
				<view class="u-flex u-row-between u-font-30 u-m-l-20 u-m-r-20">
					<text>姓名</text>
					<text style="color: #9EA2B0;">华晨宇</text>
				</view>
				<view class="u-flex u-row-between u-m-t-40 u-font-30 u-m-l-20 u-m-r-20">
					<text>毕业院校</text>
					<text style="color: #9EA2B0;">武汉大学</text>
				</view>
				<view class="u-flex u-row-between u-m-t-40 u-font-30 u-m-l-20 u-m-r-20">
					<text>所属专业</text>
					<text style="color: #9EA2B0;">城市规划</text>
				</view>
				<view class="u-flex u-row-between u-m-t-40 u-font-30 u-m-l-20 u-m-r-20">
					<text>工作年限</text>
					<text style="color: #9EA2B0;">20年</text>
				</view>
				<view class="u-flex u-row-between u-m-t-40 u-font-30 u-m-l-20 u-m-r-20">
					<text>擅长领域</text>
					<text style="color: #9EA2B0;">规划/建筑方案</text>
				</view>
			</view>
			<view class="u-flex u-row-around">
				<view class="">
					<u-button class="buttonTwo" @click="submit">查看详情</u-button>
				</view>
				<view class="">
					<u-button style="background-color: #6ADE7E;" class="buttonTwo" @click="submit">查看档期</u-button>
				</view>
			</view>
			<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" ></u-gap>
			<view class="teamName u-m-b-35">
				<view v-for="(item,index) in 18" :key="index" class="tdbk" :style="{ backgroundImage: 'url(' + bjxm + ')' }">
					<text class="dy">队员</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		
		data(){
			return{
				currentTab: 0,
				bjxm: "../../static/homepage/qytx.png",
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 30,
				marginBottom: 30,
				list1:[
					{
						name:'华晨宇',
						logo:'姓名',
						explain:'未确认',
						leader: true
					},
					{
						name:'华晨宇',
						logo:'姓名',
						explain:'未确认'
					},
					{
						name:'华晨宇',
						logo:'姓名',
						explain:'未确认'
					},
					{
						name:'华晨宇',
						logo:'姓名',
						explain:'未确认'
					},
					{
						name:'华晨宇',
						logo:'姓名',
						explain:'未确认'
					},
				]
			}
		},
		onLoad(options){
		},
		methods:{
			yqr(){
				this.currentTab = 0
			},
			wqr(){
				this.currentTab = 1
			}
				
		},
		
	}
</script>

<style scoped lang="scss">
	// .f-item{
	// 	text{
	// 		padding-bottom: 20rpx;
	// 	}
	// }
	.qb{
		padding-bottom: 20rpx;
		color: #AB61FF;
		border-bottom: 5rpx solid #AB61FF;
	}
	.teamName{
		display: flex;
		flex-wrap: wrap;
		margin-top: 15rpx;
		margin-left: -8rpx;
		.tdbk{
			width: 105rpx;
			height: 121rpx;
			background-size: 100% auto;
			background-position: 0 bottom;
			margin-left: 20rpx;
			margin-top: 20rpx;
			
		}
	}
	.qylg{
			width: 102rpx;
			height: 118rpx;
			background-size: 100% auto;
			background-position: 0 bottom;
			margin-left: 28rpx;
			margin-top: 15rpx;
			text{
				color: #888D99;
				font-size: 26rpx;
				line-height: 118rpx;
				margin-left: 27rpx;
			}
		}
		.name{
			font-size: 30rpx;
			color: #0D1D36;
			font-weight: bold;
		}
		.explain{
			width: 397rpx;
			height: 39rpx;
			background-color: #DADFED;
			text-align: center;
			line-height: 39rpx;
			.qrsj{
				font-size: 26rpx;
				color: #4B9CFF;
			}
			.time{
				font-size: 26rpx;
				color: #9DA2B0;
			}
		}
		.wqr{
			width: 100rpx;
			height: 39rpx;
			background-color: #FFF5E8;
			text-align: center;
			line-height: 39rpx;
			.wqrsm{
				color: #FF9E21;
				font-size: 26rpx;
			}
		}
		.sx{
			display: flex;
			flex-direction: column;
			align-items: center;
			.photo{
				width: 595rpx;
				height: 315rpx;
				border-radius: 10rpx;
				background-color: #F5F5F9;
			}
			.fh{
				width: 340rpx;
				height: 48rpx;
				background: #E8F2FF;
				border-radius: 4rpx;
				text{
					color: #4C9CFF;
					font-size: 30rpx;
					margin-left: 30rpx;
					line-height: 48rpx;
				}
			}
		}
		.button {
			width: 662rpx;
			margin:60rpx auto 30rpx auto;
			background: #4C9CFF;
			border-radius: 40rpx;
			border: 0;
			color: #fff;
			&.u-hairline-border:after {
				border: 0;
			}
		}
		.buttonTwo {
			width: 310rpx;
			margin:60rpx auto 30rpx auto;
			background: #4C9CFF;
			border-radius: 40rpx;
			border: 0;
			color: #fff;
			&.u-hairline-border:after {
				border: 0;
			}
		}
		.dy{
			color: #888D99;
			font-size: 26rpx;
			line-height: 121rpx;
			margin-left: 26rpx;
		}
		.sgz{
			color: #888D99;
			font-size: 22rpx;
			line-height: 121rpx;
			margin-left: 9rpx;
		}
</style>
